<template>
	<view class="app">
		<view class="main">
			<!-- 1 -->
			<uni-section title="执行对象" type="line">
				<view style="padding: 20rpx;">
					<uni-data-checkbox multiple v-model="checkbox1" :localdata="lineOption"></uni-data-checkbox>
				</view>
			</uni-section>
			<!-- 2 -->
			<view style="height: 30rpx;"></view>
			<uni-list>
				<uni-list-item title="定时类型(循环/单次)" :showSwitch="true" @switchChange="xuanze"></uni-list-item>
				<uni-list-item title="时间设置" :clickable="true" showArrow>
					<template #footer>
						<picker v-if="type==='time'" mode="time" :value="time" 
							@change="bindTimeChange">
							<view class="uni-input">{{time}}</view>
						</picker>
						<uni-datetime-picker v-else type="datetime" v-model="time" @change="changeLog" />
					</template>
				</uni-list-item>
			</uni-list>
			<view style="height: 30rpx;"></view>
			<uni-section v-if="type=='time'" title="周期" type="line">
				<view class="week_box_small">
					<button :class="item.checked?'btnscheck':''" size="mini" v-for="item in weekList"
						@click="item.checked=!item.checked" :key="item">
						{{item.name}}
					</button>
				</view>
			</uni-section>
			<view style="height: 30rpx;"></view>
			<uni-list>
				<uni-list-item>
					<template #header>
						<view style="display: flex; align-items: center;">控制类型</view>
					</template>
					<template #footer>
						<view class="control_box_obj">
							<button size="mini" @click="addParams.status=false"
								:class="!addParams.status?'btnscheck':''">分闸</button>
							<button size="mini" @click="addParams.status=true"
								:class="addParams.status?'btnscheck':''">合闸</button>
						</view>
					</template>
				</uni-list-item>

			</uni-list>

			<view class="btn_box">
				<button style="background-color: #E60012;" @click="save" class="mini-btn" type="primary">保存设置</button>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	// /wxapp/getLineList?mac=98CC4D177968
	import {
		getLineList,
		addTimerConfig
	} from "@/api/wuLian.js"
	const checkbox1 = ref([])
	const lineOption = ref([])
	onLoad((option) => {
		addParams.mac = option.mac
		getLineList({
			mac: option.mac
		}).then(e => {
			lineOption.value = e.data.map(item => {
				return {
					text: item.title,
					value: item.addr
				}
			})
		})
	})
	const addParams = reactive({
		mac: '',
		status: false,
		time: '',
		channel: '',
		weekday: ''
	})

	function xuanze(item) {
		if (item.value) {
			type.value = "date"
			const now = new Date();
			const formatTime = (time) => time.toString().padStart(2, '0');
			const datetime =
				`${now.getFullYear()}-${formatTime(now.getMonth()+1)}-${formatTime(now.getDate())} ${formatTime(now.getHours())}:${formatTime(now.getMinutes())}:00`;
			time.value = datetime
			console.log(datetime, 101)
		} else {
			type.value = "time"
			time.value = '08:00'
		}
	}
	const weekList = reactive([{
			name: "周一",
			checked: false,
			value: '一'
		},
		{
			name: "周二",
			checked: false,
			value: '二'
		}, {
			name: "周三",
			checked: false,
			value: '三'
		}, {
			name: "周四",
			checked: false,
			value: '四'
		}, {
			name: "周五",
			checked: false,
			value: '五'
		}, {
			name: "周六",
			checked: false,
			value: '六'
		}, {
			name: "周日",
			checked: false,
			value: '七'
		}
	])
	const time = ref("08:00")

	function bindTimeChange(e) {
		console.log(e, 92)
		time.value = e.detail.value
	}
	const type = ref('time')

	function save() {
		if(checkbox1.value.length===0){
			uni.showToast({
				title: "请选择线路",
				icon:'none'
			})
			return
		}
		let temp = []
		for (let i = 0; i < weekList.length; i++) {
			if (weekList[i].checked) {
				temp.push(weekList[i].value)
			}
		}
		if (type.value == 'time') {
			if (temp.length == 0) {
				uni.showToast({
					title: "请选择周期",
					icon:'none'
				})
				return
			}
		}
		if (type.value != 'date') {
			addParams.weekday = temp.join(",")
			addParams.time = time.value + ':00'
		} else {
			addParams.time = time.value.slice(0, -2) + "00";
		}
		addParams.status = addParams.status.toString()


		addParams.channel = checkbox1.value.join(",")
		
		addTimerConfig(addParams).then(e => {
			if (e.code == 0) {
				uni.showToast({
					title: "设置成功",
					success() {
						uni.navigateBack()
					}
				})
			} else {
				uni.showToast({
					title: e.msg
				})
			}

		})

	}
</script>

<style lang="less">
	.btnscheck {
		background-color: #E60012;
		color: #fff;
	}

	.week_box_small {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
		gap: 10rpx
	}

	.control_box_obj {
		display: flex;
		gap: 10rpx;
	}
</style>